<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta
            name="viewport"
            content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0"
        />
        <link rel="stylesheet" href="css/初始化.css" />
        <link rel="stylesheet" href="css/swiper-bundle.min.css" />
        <link rel="stylesheet" href="css/index.css" />
        <script src="js/felxible.js"></script>
        <script src="js/jQuery.min.js"></script>
        <title>Document</title>
        <style></style>
    </head>
    <body>
        <!-- 头部 -->
        <div class="top-title">国庆快乐</div>

        <!-- 导航栏模块 -->
        <div class="nav">
            <a href="" class="nav-a">
                <img src="icons/icon1.png" alt="" />
                <span>技术面试</span>
            </a>
            <a href="" class="nav-a">
                <img src="icons/icon2.png" alt="" />
                <span>技术面试</span>
            </a>
            <a href="" class="nav-a">
                <img src="icons/icon3.png" alt="" />
                <span>技术面试</span>
            </a>
            <a href="" class="nav-a">
                <img src="icons/icon4.png" alt="" />
                <span>技术面试</span>
            </a>
            <a href="" class="nav-a">
                <img src="icons/icon5.png" alt="" />
                <span>技术面试</span>
            </a>
            <a href="" class="nav-a">
                <img src="icons/icon6.png" alt="" />
                <span>技术面试</span>
            </a>
            <a href="" class="nav-a">
                <img src="icons/icon5.png" alt="" />
                <span>技术面试2</span>
            </a>
            <a href="" class="nav-a">
                <img src="icons/icon6.png" alt="" />
                <span>技术面试1</span>
            </a>
        </div>

        <!-- go栏目 -->
        <div class="go">
            <img src="images/go.png" alt="" />
        </div>

        <!-- 就业指导模块 -->
        <div class="conten">
            <div class="content-hd">
                <h4>
                    <span><img src="icons/i2.png" alt="" /></span>
                    就业指导
                </h4>
                <a href="">更多>></a>
            </div>

            <!-- 轮播图1 -->
            <div class="banner1">
                <div class="swiper-container bannerOne">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <a href=""><img src="images/pic.png" alt="" /></a>
                            <p>刘德华你要起飞了啊</p>
                        </div>
                        <div class="swiper-slide">
                            <a href=""><img src="images/ldh.jpg" alt="" /></a>
                            <p>刘德华你要起飞了啊</p>
                        </div>
                        <div class="swiper-slide">
                            <a href=""><img src="images/3.jpg" alt="" /></a>
                            <p>刘德华你要起飞了啊</p>
                        </div>
                    </div>
                    <!-- 小圆点
                    <div class="swiper-pagination"></div> -->
                </div>
                <!-- 左右箭头   根据需求 帮箭头取了出来-->
                <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div>
            </div>
        </div>

        <!-- 充电学习 -->
        <div class="conten conten-padding">
            <div class="content-hd">
                <h4>
                    <span><img src="icons/i2.png" alt="" /></span>
                    充电学习
                </h4>
                <a href="">更多>></a>
            </div>
            <!-- 轮播图2 -->
            <div class="banner2">
                <!-- Swiper -->
                <div class="swiper-container bannerTwo">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <a href="">
                                <img src="images/pic1.png" alt="" />
                                <h5>说低调英语，告别中式英语</h5>
                                <p>156人吃饭</p>
                            </a>
                        </div>
                        <div class="swiper-slide">
                            <a href="">
                                <img src="images/pic2.png" alt="" />
                                <h5>说低调英语，告别中式英语</h5>
                                <p>156人吃饭</p>
                            </a>
                        </div>
                        <div class="swiper-slide">
                            <a href="">
                                <img src="images/pic1.png" alt="" />
                                <h5>说低调英语，告别中式英语</h5>
                                <p>156人吃饭</p>
                            </a>
                        </div>
                        <div class="swiper-slide">
                            <a href="">
                                <img src="images/pic1.png" alt="" />
                                <h5>说低调英语，告别中式英语</h5>
                                <p>156人吃饭</p>
                            </a>
                        </div>
                    </div>
                    <!-- Add Pagination -->
                    <!-- <div class="swiper-pagination"></div> -->
                </div>
            </div>
        </div>

        <!-- 底部菜单栏 -->
        <footer class="footer-nav">
            <a href="">
                <img src="icons/home.png" alt="" />
                <p>首页</p>
            </a>
            <a href="">
                <img src="icons/ms.png" alt="" />
                <p>活动</p>
            </a>
            <a href="">
                <img src="icons/ms.png" alt="" />
                <p>关于</p>
            </a>
            <a href="">
                <img src="icons/user.png" alt="" />
                <p>我的</p>
            </a>
        </footer>
    </body>
    <script src="js/swiper-bundle.min.js"></script>
    <script>
        // 轮播图1
        (function () {
            // 如果有多个轮播图，需要修改下 swiper-container,给元素一个新类名调用
            var swiper = new Swiper(".bannerOne", {
                slidesPerView: 2.1, // 能够看见的图片的个数，可以是小数
                spaceBetween: 30,
                centeredSlides: true,
                loop: true,
                // 圆点
                pagination: {
                    el: ".swiper-pagination",
                    clickable: true,
                },
                // 左右箭头
                navigation: {
                    nextEl: ".swiper-button-next",
                    prevEl: ".swiper-button-prev",
                },
            });
        })();

        // 轮播图2
        (function () {
            // 如果有多个轮播图，需要修改下 swiper-container，给元素一个新类名调用
            var swiper = new Swiper(".bannerTwo", {
                slidesPerView: 2.2,
                spaceBetween: 20,
                // 圆点
                pagination: {
                    el: ".swiper-pagination",
                    clickable: true,
                },
            });
        })();
    </script>
</html>
